<template>
    <!-- 我们一般用class来设定样式 -->
    <div class="student">
        <!-- html标签要想使用vue定义的属性，需要使用插值语法{{  }}就是两队大括号 -->
        <h1>姓名：{{ name }}</h1>
        <h1>年龄：{{ age }}</h1>
        <!-- @是动态绑定，其实是v-modevl属性的缩写 -->
        <!-- 我们通过动态绑定 为这个按钮的点击事件(click)绑定了一个函数叫showTel，也就是一点击就执行showTel函数 -->
        <button @click="showTel">点我显示联系电话</button>
        <button @click="changeAge">年龄+1</button>
    </div>
</template>

<!-- 
    语法糖：简单理解就是在不改变其功能的情况下，通过改变代码的写法，让代码更具有可读性，更容易理解，就相当于汉语里的成语。
    setup：setup语法糖，代替了setup函数
    lang='ts' 指定脚本语言
    name='Student' 组件名称
-->
<script setup lang="ts" name="Student">
//数据属性，原本是写在data中，注意：这种定义变量的方式无法实现响应式数据
//JavaScript里面三种定义变量范围权限的关键字：let：局部变量 var：全局变量 const：常量修饰符
let name = '学生张三';
let age = 666;
let tel = 13636363366;
//函数，原本是写在methods中
function showTel() {
    alert(tel);
}
function changeAge() {
    age += 1;
}
</script>


<style scoped>
.student {
    background-color: aquamarine;
    /*背景颜色 */
    padding: 30px;
    /*内边距 */
    box-shadow: 0 0 10px;
    /*边框阴影 */
    border-radius: 10px;
}

/* 标签选择器 */
button {
    margin: 10px;
}
</style>
